<template>
  <div class="ele-body">
    <el-row :gutter="20">
      <el-col :span="isOther ? 16 : 24">
        <info />
      </el-col>
      <el-col v-if="isOther" :span="8">
        <type />
      </el-col>
    </el-row>
    <el-card shadow="never" style="margin-top: 10px">
      <vuln-table :url="vulnUrl" :show-btn="false" />
    </el-card>
    <port v-show="$store.state.asset.hasPort" :asset-id="id" :table-data="portData" @reload="portReload" />
    <plugin v-show="$store.state.asset.hasPlugin" :asset-id="id" :table-data="pluginData" @reload="pluginReload" />
  </div>
</template>

<script>
import info from './info'
import type from './type'
import port from './port'
import plugin from './plugin'
import vulnTable from '../../vuln/list/table'
export default {
  name: 'AssetDetial',
  components: {
    info,
    type,
    port,
    plugin,
    vulnTable
  },
  data() {
    return {
      id: this.$route.params.id,
      portData: [],
      pluginData: []
    }
  },
  computed: {
    assetInfo() {
      return this.$store.state.asset.assetInfo
    },
    isOther() {
      return this.$store.state.asset.type === 'web' || this.$store.state.asset.type === 'os'
    },
    vulnUrl() {
      return `/asset/vuln/list/${this.$route.params.id}/`
    },
    hasPlugin() {
      return this.$store.state.asset.hasPlugin
    },
    hasPort() {
      return this.$store.state.asset.hasPort
    }
  },
  created() {
    // this.$nextTick(() => {
    //   const assetId = this.$route.params.id
    //   this.$store.dispatch('asset/getAssetInfo', assetId)
    // })
  },
  mounted() {
    const assetId = this.$route.params.id
    this.$store.dispatch('asset/getAssetInfo', assetId).then(() => {
      if (this.hasPlugin) { this.getPlugin() }
      if (this.hasPort) { this.getPort() }
    })
  },
  methods: {
    /* 获得端口列表数据 */
    getPort() {
      this.$http.get(`/asset/port/list/${this.id}`).then(res => {
        this.portData = res.data.data
      })
    },
    /* 获得插件列表数据 */
    getPlugin() {
      this.$http.get(`/asset/plugin/list/${this.id}`).then(res => {
        this.pluginData = res.data.data
      })
    },
    /* 监听插件列表重载 */
    pluginReload() {
      this.getPlugin()
    },
    /* 监听端口列表重载 */
    portReload() {
      this.getPort()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
